<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<script src="js/bootstrap_5.1.1_js_bootstrap.bundle.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap_5.1.1_css_bootstrap.min.css">
<style>
	*{
	   margin: 0px;
	   padding: 0px;
	}
	body{
		background-color: rgb(245, 246, 250);
	}
	#box{
		height: 100vh;
		width: 100vw;
	}
	li{
		list-style: none;
	}
	a{
	   text-decoration: none;
	   color: rgb(81, 210, 197);
	   font-weight:bold;
	}
	a:hover{
		color: rgb(105, 109, 115);
	}
	nav{
	   background-color:white;
	   display: inline-block;
	   width: 100vw;
	   height: 10vh;
	   position: fixed;
	   z-index: 1;
	   font-size: 1vw;
	   color: rgb(93, 79, 87);
	}
	nav #log{
		height: 100%;
		display: inline-block;
		position: relative;
		left: 10%;
		font-size: 3vw;
		text-align: auto;
	}
	nav .help{
		float: right;
		height: 100% ;
		line-height: 250%;
		position: relative;
		margin-right: 5%;
		top: 15%;
		right: 10%;
		font-size: 1.5vw;
	}
	#left{
		position: relative;
		float: left;
		top: 13vh;
		width: 20%;
		background-color: white;
	}
	#right{
		position: relative;
		float: right;
		right: 5%;
		top: 10vh;
		height: 92%;
        width: 70%;
	}
	#right div{
		position: relative;
		background-color: white;
		text-overflow:ellipsis;
		overflow:hidden;
		margin-top: 2%;
		float: left;
		height: 40%;
		width: 48%;
	}
	#right .rl{
		position: relative;
		background-color: white;
		margin-top: 2%;
		height: 40%;
		width: 48%;
		margin-left: 3%;
	}
	#headImg{
         height: 280px;
         width: 100%;
	}
	#userName{
		text-align: center;
		width: 100%;
		line-height: 200%;
		font-size: 1.5vw;
		height: 10%;
	}
	ul li{
		text-align: center;
		position: relative;
		height: 20%;
		line-height: 200%;
	}
	.up{
        position: relative;
		width: 100%;
		color: white;
		background-color: rgb(251, 114, 153);
	}
	.btn_delete{
		position:relative;
		color:white;
		left:28vw;
		width:5vw;
		height:5vh;
		background-color: rgb(0, 174, 236);
	}
	.pageBar{
		height: 10vh;
		width: 65vw;
		margin: auto;
		position: relative;
		left: 10vw;
		bottom: 8vh;
		overflow:hidden;
	}
	.pageBar a{
		border:0.1vh solid rgb(197, 197, 213);
	}
	.un{
		width:30vw;
	}
	.ps{
		width:25vw;
	}
	.rps{
		width:25vw;
		position:relative;
		top:-4vh;
		left:30vw;
	}
	.rpst{
		position:relative;
		left:26vw;
	}
	.sex{
		position:relative;
		left:20vw;
	}
	.sex_t{
		position:relative;
		left:20vw;
	}
	.udate{
		width:25vw;
		top:-8vh;
		position:relative;
		left:30vw;
	}
	.udate_t{
		position:relative;
		left:25.5vw;
	}
	.phonenum{
		width:25vw;
	}
	.email{
		position:relative;
		top:-4vh;
		left:30vw;
		width:25vw;
	}
	.email_t{
		position:relative;
		left:26vw;
	}
</style>
<body>
	<nav>
		<img src="img/logo.png" alt="" id="log">
		<a href="" class="help" id='a3'>首页</a>
		<a href="" class="help" id='a1'>关注</a>
		<a href="" class="help" id='a2'>我的粉丝</a>
	</nav>
	<div id="box">
		<div id="left">
		    <img src="" alt="" id="headImg">
		    <p id="userName">username</p>
		    <button class="btn up" data-bs-toggle="modal" data-bs-target="#myModal" id="updateInfor">修改个人信息</button>
		</div>
		<div id="right">
		</div>
	</div>
	<div class="pageBar">
		
	</div>
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">修改个人信息</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
      		<label class="form-label">修改昵称:</label>
        	<input type="text" class="form-control un" placeholder="请输入新的昵称" id='username'>
        	<hr style="border: 0.1vh dashed;">
        	<label class="form-label">修改密码:</label>
        	<label class="form-label rpst">再次确认密码:</label>
        	<input type="password" class="form-control ps" placeholder="请输入新的密码" id='pass1'>
        	<input type="password" class="form-control rps" placeholder="请再次输入密码" id='pass2'>
        	<hr style="border: 0.1vh dashed;">
        	<label class="form-label sex_t">修改性别：</label>
        	<label class="form-label udate_t">修改生日:</label>
    		<div class="form-check sex">
      			<input type="radio" class="form-check-input" id="radio1"  value="男" name='sex'>
      			<label class="form-check-label" for="radio1">男</label>
    		</div>
    		<div class="form-check sex">
      			<input type="radio" class="form-check-input" id="radio2"  value="女" name='sex'>
      			<label class="form-check-label" for="radio2">女</label>
    		</div>
    		<div class="form-check sex">
      			<input type="radio" class="form-check-input" id="radio3"  value="其他" name='sex'>
      			<label class="form-check-label" for="radio3">其他</label>
    		</div>
        	<input type="date" class="form-control udate" id="date">
        	<hr style="border: 0.1vh dashed;">
        	<label class="form-label">修改电话:</label>
        	<label class="form-label email_t">修改邮箱:</label>
        	<input type="text" class="form-control  phonenum" placeholder="请输入新的电话" id="phone">
        	<input type="email" class="form-control email" placeholder="请输入新的邮箱" id="email">
        	<hr style="border: 0.1vh dashed;">
        	<label class="form-label">修改个人简介:</label>
        	<input type="text" class="form-control" placeholder="请输入新的个人简介" id='text'>
        	<hr style="border: 0.1vh dashed;">
      </div>
      <div class="modal-footer">
      	<button type="submit" class="btn btn-primary" id='que'>确定</button>
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
 </div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	window.onload=function(){
		searchUser();
		searchPost(1,4);
	}
	var params=location.search.substring(1);
	function searchUser(){
		$.ajax({
			type:"POST",
			url:"User.do",
			data:{
				userId:params.split("&")[0].split("=")[1]
			},
			success:function(data){
				$("#headImg").attr("src",data.userHeadImg);
				$("#a1").attr("href","fans.html?id="+data.userId);
				$("#a2").attr("href","fans.html?id="+data.userId);
				$("#a3").attr("href","index.html?id="+data.userId);
				$("#log").attr("href","index.html?id="+data.userId);
				$("#userName").html("<h3>"+data.userName+"</h3>");
				$("#right").find("p").html("<h3>"+data.individualResume+"</h3>");
			}
		})
	}
	var currt=0;
	function searchPost(pageNum,pageSize){
		$.ajax({
			type:"POST",
			url:"PostUser.do",
			data:{
				userId:params.split("&")[0].split("=")[1],
				pageNum:pageNum,
				pageSize:pageSize
			},
			success:function(data){
				$("#right").empty();
				console.log(data);
				var Post =data.data;
				var currt=data.pageNum;
				for(var i=0;i<Post.length;i++){
					var post=Post[i];
					var str1=post.postText.split("<p>").join("").split("</P>").join("").split("<P>").join("").split("</p>").join("").split("<img>").join("").substring(0,200)+"...";
					var str2=post.postTitle.split("<h2>").join("").split("</h2>").join("").split("<h3>").join("").split("</h3>").join("");
					var $p=$("<p onclick='searchpost("+post.postId+")'>"+str1+"</p>");
					var $p1=$("<p onclick='searchpost("+post.postId+")'>"+str2+"</p>");
					var $div=$("<div ></div>");
					var  $button=$("<button onclick='delepost("+post.postId+")' class='btn btn_delete'>删除</button>");
					$div.append($p1).append($p).append($button);
					$("#right").append($div);
				}
			}
		})
	}
	function searchpost(postId){
		window.location.href ="post_reply1.html?id="+postId+"&uId="+params.split("&")[0].split("=")[1]+"&uid="+params.split("&")[1].split("=")[1];
	}
	function delepost(postId){
		$.ajax({
			type:"POST",
			url:"deletePost.do",
			data:{
				postId:postId,
				userId:params.split("&")[1].split("=")[1]
			},
			success:function(data){
				console.log(data);
				if(data==1){
					searchPost(1,4);
				}
			}
		})
	}
	function makePageBar(data,currt){
		$(".pageBar").empty();
		var totalPages = data.totalPages;
		var hasPrev = data.hasPrev;
		var hasNext = data.hasNext;
		var pageNum = data.pageNum;
		if(hasPrev){
			var $firstBtn = $("<a onclick='searchPost(1,4)' href='javascript:void(0);'>首页</a>");
			var $prevBtn = $("<a onclick='searchPost("+(pageNum-1)+",4)' href='javascript:void(0);'>上一页</a>");
			$(".pageBar").append($firstBtn).append($prevBtn);
		}
		var num=0;
		for(var i =1; i<=totalPages;i++){
			var $pageBtn = $("<a onclick='searchPost("+i+",4)' href='javascript:void(0);'></a>").text(i);
			num++;
			$(".pageBar").append($pageBtn);
			
		}
		if(hasNext){
			var $lastBtn = $("<a onclick='searchPost("+totalPages+",4)' href='javascript:void(0);'>尾页</a>");
			var $nextBtn = $("<a onclick='searchPost("+(pageNum+1)+",4)' href='javascript:void(0);'>下一页</a>");
			$(".pageBar").append($nextBtn).append($lastBtn);
		}
	}
	$("#updateInfor").click(function(){
		$.ajax({
			type:"POST",
			url:"User.do",
			data:{
				userId:params.split("&")[0].split("=")[1]
			},
			success:function(data){
				$("#text").attr("value",data.individualResume);
				$("#username").attr("value",data.userName);
				var time = new Date(data.userBirth);
				var year= time.getFullYear()  //年
			    var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
			    var day = ("0" + time.getDate()).slice(-2); //日
			     var mydate = year + "-" + month + "-" + day;
				$("#date").attr("value",mydate);
				$("#phone").attr("value",data.userPhone);
				$("#email").attr("value",data.userEmail);
			}
		})
	})
	
	$("#que").click(function(){
		if($("#pass1").val() == $("#pass2").val() && $("#pass1").val()!= "" && $("#pass1").val()!=null){
			$.ajax({
				type:"POST",
				url:"update.do",
				data:{
					username:$("#username").val(),
					password:$("#pass1").val(),
					userSex:$("input[name='sex']").filter(':checked').val(),
					userBirth:$("#date").val(),
					userPhone:$("#phone").val(),
					userEmail:$("#email").val(),
					individualResume:$("#text").val(),
				},
				success:function(data){
					searchPost(1,4);
				}
			})
		}
	})
	$("#left ul").click(function(){
		
	})
	
	$("#right").not(".pageBar").click(function(){

	})
</script>
</html>